<template>
  <div class="no-data">
    <div class="no-data-icon"></div>
    <p class="no-data-text">{{title}}</p>
  </div>
</template>

<script>
export default {
  name: 'NoData',
  props: {
    title: {
      type: String,
      default: '暂无数据！'
    }
  }
}
</script>

<style scoped lang="less">
@import '~assets/style/variable';
@import '~assets/style/mixin';
.no-data {
  text-align: center;
  &-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-size: cover;
    background: url('../assets/images/no-data.png') no-repeat center center;
  }
  &-text {
    margin-top: 8px;
    font-size: @fs-medium;
    color: var(--text-color);
  }
}
</style>
